import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class StackPage extends PageWithTitle {
  const StackPage({super.key}) : super("栈布局(Stack)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("类似Android的FrameLayout，我们可以通过Stack在容器中堆叠多个子组件，在"
          "Android中我们常常基于FrameLayout来自定义布局，在Flutter中也是可以基于Stack+"
          "Positioned来实现自定义布局"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Stack"),
      LabelText("- alignment 对齐效果"),

      AppSpacer.large,
      UlItem("IndexedStack"),
      BodyText("一个可以控制单独显示哪个子组件的栈布局，目前没想出有啥用。。。"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 80,
      child: Stack(
        children: [
          Container(
            color: const Color.fromARGB(128, 255, 0, 0),
            width: 40,
            height: 40,
          ),
          Positioned(
            left: 20,
            top: 20,
            child: Container(
              color: const Color.fromARGB(128, 0, 255, 0),
              width: 40,
              height: 40,
            ),
          ),
          Positioned(
            left:40,
            top: 40,
            child: Container(
              color: const Color.fromARGB(128, 0, 0, 255),
              width: 40,
              height: 40,
            ),
          ),
        ],
      ),
    );
  }
}
